<template>
  <div class="HomeInfo">
    <div class="userInfo mycard">
      <div class="left">
        <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-left:5%" alt="" class="avatar" />
      </div>
      <div class="right">
        <div class="rightTop">
          <div class="username" prop="username">
            <div class="ptherInfoValue words">{{ userInfo.username }}</div>


          </div>

        </div>
        <div class="rightBottom">
          <!-- 动态 关注 粉丝 -->
          <div class="dataNums">
            <div class="numItem">
              <div class="numItemTop" style="color:#ffffff;font-size: 2rem;">{{ 32 }}</div>
              <div class="numItemBottom"  style="color:#ffffff;font-size: 2rem;">动态</div>
            </div>
            <div class="numItem">
              <div class="numItemTop" style="color:#ffffff;font-size: 2rem;">{{ 33 }}</div>
              <div class="numItemBottom"  style="color:#ffffff;font-size: 2rem;">关注</div>
            </div>
            <div class="numItem">
              <div class="numItemTop"  style="color:#ffffff;font-size: 2rem;">{{ 9999 }}</div>
              <div class="numItemBottom"  style="color:#ffffff;font-size: 2rem;">粉丝</div>
            </div>
          </div>

        </div>

        <!-- 其它信息 -->
        <div class="otherInfo">
          <div class="otherInfoItem">
            <div class="otherInfoKey words" prop="userid">用户id：</div>
            <div class="ptherInfoValue words">{{ userid }}</div>
          </div>
          <div class="otherInfoItem">
            <div class="otherInfoKey words">所在地区：</div>
            <div class="ptherInfoValue words">
              {{ "湖北武汉" }}
            </div>
          </div>
          <div class="otherInfoItem">
            <div class="otherInfoKey words">个人介绍：</div>
            <div class="ptherInfoValue words">
              {{ "ikun" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 歌单 -->
    <div class="musicList mycard">
      <div class="musicListTitle words">
        {{ userInfo.username }}创建的歌单({{ UserMusicList.length }})
      </div>
      <diV>

        <el-row>
          <el-col :span="3" v-for="(item, index) in UserMusicList" :key="index" :offset="index % 5 == 0 ? 0 : 2">
            <el-card :body-style="{ padding: '0px' }" style="width: 13.1vw">
              <img src="https://www.liuzhaojie.cn/usr/images/zj/Jay.png" class="image" style="height:15vw" />

              <div style="padding: 10px; text-align: center;">
                <span>{{ item.list_title }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </diV>
    </div>
    <!-- <div class="musicList">
      <div class="musicListTitle">
        {{ userInfo.username }}收藏的歌单({{ 22 }})
      </div>
      <diV>导入收藏歌单的封面和名字

      </diV>
    </div> -->


  </div>
</template>
<script>
export default {
  name: "HomeInfo",
  components: {},
  data() {
    return {
      // 用户信息
      userInfo: {},
      // 创建的歌单
      UserMusicList: [],
      // 收藏的歌单
      // collectedMusicList: [],
      userid: window.sessionStorage.getItem('userid')

    }
  },
  created() {
    this.getuserInfo();
    this.getUserMusicList();
  },
  methods: {
    async getuserInfo() {
      const res = await this.$http.get('music/findUserByUserid', { params: { userid: this.userid } });
      this.userInfo = res.data.data;
      //  console.log(this.classifyList);
      // const res1 = await this.$http.get('user/login',{ params: { username:this.username} });

    },
    // 请求用户歌单
    async getUserMusicList() {

      const res = await this.$http.get('music/findUserList', { params: { userid: this.userid } });
      this.UserMusicList = res.data.data;



    }
  }
}

</script>


<style scoped>
.userInfo {
  margin: 30px 0px;
  display: flex;
}

.avatar {
  margin-top: 5px;
  height: 150px;
  width: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.right {
  margin-left: 20px;
  flex: 1;
}

.username {

  font-size: 22px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.rightTop {
  width: 100%;
  border-bottom: 1px solid #ddd;
}


.mycard {
  padding-top: 20px;
  padding-bottom: 10px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}

.words {
  font-size: 2rem;
  color: #ffffff;
  text-shadow: -3px -2px 3px #dbdada, 4px 3px 3px #444444;
}

.logout:hover {
  background-color: #f2f2f2;
}

.logout i {
  font-size: 12px;
  margin-right: 3px;
}

.logout span {
  font-size: 12px;
}

.dataNums {
  display: flex;
  margin: 10px 0 5px;
}

.numItem {
  border-left: 1px solid #eee;
  padding: 0 25px;
  text-align: center;
  cursor: pointer;
}

.numItem:nth-child(1) {
  border-left: none;
  padding-left: 3px;
}

.numItemTop {
  font-size: 18px;
}

.numItemBottom {
  font-size: 12px;
  transform: scale(0.8);
}

.otherInfo {
  font-size: 15px;
  transform: scale(0.9) translateX(-5%);
  user-select: text !important;
}

.otherInfoItem {
  display: flex;
  margin: 5px 0;
}

.otherInfoKey {

}

.otherInfoValue {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.musicList {
  /* margin-left: 20px; */

  padding-bottom: 30px;
}

.musicListTitle {
  font-weight: bold;
  font-size: 18px;
}
</style>
